<template>
	<view>
		<!-- 广场 -->
		<view class="squareTop">
			<image src="../../static/square/squareTop.png"></image>
			<text v-for="item in topArr" :class="{'topTitle':true,'active':topIndex == item.id}" :key="item.id"
				@tap="change(item.id)">{{item.title}}</text>
		</view>
		<view class="search">
			<image src="../../static/img/chatSearch.svg"></image>
			<input type="text" placeholder="广邮的猫怀孕了">
		</view>

		<view class="Box">
			<scroll-view class="invitation">
				<view class="invitationBox" v-for="item in invitationList" :key="item.id">
					<view class="userTop">
						<image :src="item.headUrl" class="userHead"></image>
						<text class="title">{{item.name}}</text>
						<text class="time">{{item.time}}</text>
						<view class="attention">关注</view>
					</view>

					<view class="contentBox">
						<view :class="{'content':true,'hide':!item.hide}" @tap="showinfo(item.id)">
							{{item.con}}
						</view>
						<view class="imgBox">
							<image v-for="item1 in item.imgList" :src="item1.imgurl" mode="aspectFill"
								:key="item1.imgId" :class="item.imgList.length>2?'images':'imgOne'"></image>
						</view>
						<view class="contentBottom">
							<image src="../../static/img/fenxiang.png"></image>
							<view>
								<image src="../../static/img/dianzan.png"></image>
								<text>{{item.dianzanNum}}</text>
							</view>
							<view>
								<image src="../../static/img/liuyan.png"></image>
								<text>{{item.liuyanNum}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topIndex: 1,
				topArr: [{
						id: 0,
						title: "关注"
					},
					{
						id: 1,
						title: "推荐"
					}
				],
				invitationList: [{
						id: 0,
						hide: false,
						name: "张三",
						headUrl: "../../static/head/1.jpg",
						time: "2022-10-26 20:30",
						con: "你好啊，asdooahsfosaifo0iahfioaeiueuge哦好石佛爱妃啊是东欧爱好hi发佛奥神佛爱狗i共i阿三广佛爱上佛i啊哈hi哦啊是覅哦啊刚刚夫人房里世界",
						imgList: [{
								imgId: 0,
								imgurl: "../../static/bg/bg1.png",
							},
							{
								imgId: 1,
								imgurl: "../../static/bg/bg2.png",
							},
							{
								imgId: 2,
								imgurl: "../../static/bg/bg3.png",
							}
						],
						dianzanNum: 12,
						liuyanNum: 28
					},
					{
						id: 1,
						hide: false,
						name: "彭于晏",
						headUrl: "../../static/head/2.jpg",
						time: "2022-10-26 22:30",
						con: "你好啊，我是彭于晏，是一个猛男 也是有一个帅哥",
						imgList: [{
							imgId: 0,
							imgurl: "../../static/bg/bg1.png",
						}],
						dianzanNum: 12,
						liuyanNum: 28
					},
					{
						id: 2,
						hide: false,
						name: "啊浩",
						headUrl: "../../static/head/3.jpg",
						time: "2022-10-26 23:30",
						con: "你好啊，世界",
						imgList: [{
								imgId: 0,
								imgurl: "../../static/bg/bg1.png",
							},
							{
								imgId: 1,
								imgurl: "../../static/bg/bg2.png",
							},
							{
								imgId: 2,
								imgurl: "../../static/bg/bg3.png",
							}
						],
						dianzanNum: 12,
						liuyanNum: 28
					},

				]
			}
		},
		methods: {
			// 顶部切换
			change(index) {
				this.topIndex = index;
			},
			// 文本溢出展开
			showinfo(id) {
				// console.log(id,this.invitationList.id.hide)
				// this.invitationList.id.hide = !this.invitationList.id.hide
				this.invitationList[id].hide = !this.invitationList[id].hide
			}
		}
	}
</script>

<style lang="scss">
	.squareTop {
		width: 100%;
		height: 88rpx;
		margin-top: 76rpx;
		position: relative;
		text-align: center;

		image {
			position: absolute;
			top: 4rpx;
			left: 32rpx;
			margin-top: 12rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.topTitle {
			top: 16rpx;
			height: 88rpx;
			margin-right: 40rpx;
			line-height: 88rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
		}

		.active {
			color: rgba(157, 201, 242, 0.9);
			border-bottom: 4rpx solid rgba(157, 201, 242, 0.9);
		}
	}

	.search {
		width: 680rpx;
		height: 96rpx;
		margin: 8rpx auto 32rpx auto;
		border-radius: 44rpx;
		box-sizing: border-box;
		background-color: rgba(239, 239, 239, 0.35);
		position: relative;
		color: rgba(16, 16, 16, 1);

		input {
			width: 576rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left: 128rpx;
			font-size: 32rpx;
		}

		image {
			width: 56rpx;
			height: 56rpx;
			left: 32rpx;
			top: 16rpx;
			position: absolute;
		}
	}

	.Box {
		height: 100%;

		.invitation {
			height: 100%;

			.invitationBox {
				margin: 0 auto;
				width: 686rpx;
			}

			.userTop {
				position: relative;
				height: 128rpx;

				.userHead {
					width: 96rpx;
					height: 96rpx;
					border-radius: 96rpx;
					margin-top: 16rpx;
				}

				.title {
					position: absolute;
					top: 28rpx;
					left: 112rpx;
					color: #7c7c7c;
					font-size: 28rpx;
				}

				.time {
					position: absolute;
					top: 64rpx;
					left: 112rpx;
					font-size: 24rpx;
					color: #b7b7b7;
				}

				.attention {
					float: right;
					text-align: center;
					line-height: 56rpx;
					font-size: 28rpx;
					margin-top: 36rpx;
					width: 124rpx;
					height: 56rpx;
					background-color: rgba(157, 201, 242, 0.75);
					border-radius: 40rpx;
				}
			}

			.contentBox {
				width: 686rpx;
				word-wrap: break-word;
				word-break: break-all;

				.imgBox {
					display: flex;
					width: 702rpx;
					flex-wrap: wrap;
					flex-direction: row;
					overflow: hidden;
					font-size: 24rpx;
					color: #000;

					.imgOne {
						max-width: 686rpx;
						border-radius: 16rpx;
					}

					.images {
						width: 218rpx;
						height: 164rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						border-radius: 16rpx;
					}
				}

				.content {
					max-width: 686rpx;
					text-align: justify;
				}

				.show {
					font-size: 28rpx;
					float: right;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
					color: #0078FF
				}

				.hidebtn {
					display: flex;
					flex: 1;
					justify-content: flex-end;
					color: #0078FF;
					font-size: 28rpx;
				}

				.hide {
					word-break: break-word; //换行模式
					overflow: hidden;
					text-overflow: ellipsis; //修剪文字
					display: -webkit-box;
					-webkit-line-clamp: 2; //此处为上限行数
					-webkit-box-orient: vertical;
				}

				.contentBottom {
					margin-top: 4rpx;
					display: flex;
					font-size: 32rpx;
					height: 72rpx;

					view {
						display: flex;
					}

					view:nth-of-type(1) {
						margin-left: 392rpx;
						margin-right: 44rpx;
					}

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}


		}
	}
</style>
